<template>
	<view class="mypage-container">

		<view class="user-header">

			<img class="user-background-image" :src="userInfo?.info_background_image">

			</img>

			<view class="user-content">

				<!-- 自定义头部 -->
				<view class="head"></view>

				<view class="user-options">
					<view class="user-options-li">
						<wd-icon name="notification" size="22px"></wd-icon>
					</view>
					<view class="user-options-li">
						<wd-icon name="setting1" size="22px"></wd-icon>
					</view>
				</view>

				<!-- 个人信息模块 -->
				<view class="user-info-box">
					<userAvatar :src="userInfo?.avatar" size="108" radius="20rpx"></userAvatar>
					<view class="info">
						<text class="user-username">{{userInfo?.username}}</text>
						<text class="user-nickname">{{userInfo?.nickname}}</text>
					</view>
					<view class="arrow-box">
						<wd-icon name="arrow-right" />
					</view>
				</view>

				<!-- 粉丝 -->
				<view class="fans-box">
					<view class="fans-item">
						<view class="fans-num">2</view>
						<view class="fans-text">粉丝</view>
					</view>
					<view class="fans-item">
						<view class="fans-num">12</view>
						<view class="fans-text">关注</view>
					</view>
					<view class="fans-item">
						<view class="fans-num">30</view>
						<view class="fans-text">活力值</view>
					</view>
					<view class="fans-item">
						<view class="fans-num">100</view>
						<view class="fans-text">信用分</view>
					</view>
				</view>

			</view>

		</view>

		<!-- 常用功能 -->
		<view class="usual-ability-title">
			常用功能
		</view>
		<view class="usual-ability-box">
			<view class="usual-ability-content">
				<view class="usual-ability-item">
					<image src="@/static/wodexinxi.png"></image>
					<view class="usual-ability-item-text">
						我的信息
					</view>
				</view>
				<view class="usual-ability-item">
					<image src="@/static/wodequanyi.png"></image>
					<view class="usual-ability-item-text">
						我的权益
					</view>
				</view>
				<view class="usual-ability-item">
					<image src="@/static/woderenzheng.png"></image>
					<view class="usual-ability-item-text">
						我的认证
					</view>
				</view>

				<view class="usual-ability-item">
					<image src="@/static/pinglunguanli.png"></image>
					<view class="usual-ability-item-text">
						我的地址
					</view>
				</view>
			</view>
		</view>

		<!-- 常用功能 -->
		<view class="usual-ability-title">
			常用功能
		</view>

		<view class="usual-ability-box">
			<view class="usual-ability-content">
				<view class="usual-ability-item">
					<image src="@/static/wodexinxi.png"></image>
					<view class="usual-ability-item-text">
						我的信息
					</view>
				</view>
				<view class="usual-ability-item">
					<image src="@/static/wodequanyi.png"></image>
					<view class="usual-ability-item-text">
						我的权益
					</view>
				</view>
				<view class="usual-ability-item">
					<image src="@/static/woderenzheng.png"></image>
					<view class="usual-ability-item-text">
						我的认证
					</view>
				</view>

				<view class="usual-ability-item">
					<image src="@/static/pinglunguanli.png"></image>
					<view class="usual-ability-item-text">
						我的地址
					</view>
				</view>
			</view>
		</view>


		<view class="logout">
			<wd-button type="error" block @click="clickLogout">退出登录</wd-button>
		</view>

	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
	} from 'vue'
	import {
		onReachBottom,
		onPageScroll,
		onReady
	} from "@dcloudio/uni-app"
	import useUserStore from '@/stores/store/user.js'
	const userStore = useUserStore()
	import userName from '@/components/user_name_text/user_name_text.vue'
	import userAvatar from "@/components/user_avatar/user_avatar.vue"
	import overallRequest from "@/utool/http/http.js"
	const userInfo = computed(() => userStore.userInfo)
	// 点击退出登录
	function clickLogout() {
		logout()
	}
	// 执行退出登录
	function logout() {
		userStore.logout()
		// 跳转到登录页面
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}
</script>

<style scoped>
	page {
		background: #f4f6f8;
	}

	.user-header {
		padding-top: 70rpx;
		position: relative;
		height: 400rpx;
	}
	.user-content{
		position: absolute;
		top: 0px;
		left: 0rpx;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background: transparent;
	}
	.user-background-image {
		position: absolute;
		top: 0px;
		left: 0rpx;
		width: 100%;
		height: 100%;
		z-index: 1;
		outline: none;
		filter: brightness(70%) opacity(80%);
	}
	.user-options {
		height: 100rpx;
		display: flex;
		gap: 20rpx;
		justify-content: flex-end;
		align-items: center;
		padding-right: 40rpx;
	}

	.user-options-li {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 用户信息部分 */
	.user-info-box {
		padding: 20rpx 50rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		gap: 25rpx;
		margin-bottom: 30rpx;
	}

	.info {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.user-username {
		font-size: 40rpx;
	}

	.user-nickname {
		margin-top: 10rpx;
		font-size: 28rpx;
		color: gray;
	}

	.avatar-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		align-items: center;
		padding-left: 40rpx;
	}

	.avatar-box .avatar-text {
		padding-left: 20rpx;
	}

	.avatar-text .name {
		font-size: 50rpx;
		font-weight: 500;
		color: #000002;
	}

	.avatar-text .desc {
		color: #a0a1a3;
		padding-top: 10rpx;
		font-size: 30rpx;
	}

	.arrow-box {
		width: 50rpx;
		display: flex;
		align-items: center;
	}

	.fans-box {
		padding: 0rpx 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.fans-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		background: white;
		border-radius: 12rpx;
		width: 20%;
		background-color: #ffffff4d;
		padding: 15rpx 0rpx;
	}

	.fans-num {
		font-size: 30rpx;
		font-weight: bold;
		color: #ff8181;
		margin-bottom: 0rpx;
	}

	.fans-text {
		font-size: 35rpx;
		color: black;
	}

	.usual-ability-box {
		width: 90%;
		margin-left: 5%;
		margin-top: 0rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	/* 常用功能 */
	.usual-ability-title {
		margin: 35rpx 0;
		margin-top: 55rpx;
		font-size: 35rpx;
		font-weight: 700;
		padding: 0rpx 40rpx;
		box-sizing: border-box;
	}

	.usual-ability-content {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.usual-ability-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 160rpx;
	}

	.usual-ability-item image {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 25rpx;
	}

	.usual-ability-item-text {
		font-size: 25rpx;
		font-weight: 400;
	}

	.logout {
		padding: 0 45rpx;
		padding-bottom: 45rpx;
		margin-top: 50rpx;
	}
</style>